<template>
  <card-layout title="生态监测" bg="3" class="chart">
    <template #extra>
      <el-icon class="extra-more" :size="22" @click="onClose">
        <Close />
      </el-icon>
    </template>
    <div class="ecological-monitoring">
      <div class="tab-container">
        <div class="tab-buttons">
          <button 
            class="tab-btn" 
            :class="{ active: activeTab === 'realtime' }"
            @click="activeTab = 'realtime'"
          >
            实时数据
          </button>
          <button 
            class="tab-btn" 
            :class="{ active: activeTab === 'history' }"
            @click="activeTab = 'history'"
          >
            历史数据
          </button>
        </div>
      </div>
      <div class="monitoring-content">
        <!-- PM2.5 图表1 -->
        <div class="chart-section">
          <div class="chart-header">
            <h3 class="chart-title">PM2.5</h3>
            <div class="chart-legend">
              <span class="legend-item">
                <span class="legend-dot" style="background-color: #00d4aa;"></span>
                监测点1
              </span>
              <span class="legend-item">
                <span class="legend-dot" style="background-color: #ff6b6b;"></span>
                监测点2
              </span>
            </div>
          </div>
          <div class="chart-container">
            <div style="width: 100%; height: 180px" ref="pm25Chart1Ref"></div>
          </div>
        </div>

        <!-- PM2.5 图表2 -->
        <div class="chart-section">
          <div class="chart-header">
            <h3 class="chart-title">PM2.5</h3>
            <div class="chart-legend">
              <span class="legend-item">
                <span class="legend-dot" style="background-color: #00d4aa;"></span>
                监测点1
              </span>
              <span class="legend-item">
                <span class="legend-dot" style="background-color: #ff6b6b;"></span>
                监测点2
              </span>
            </div>
          </div>
          <div class="chart-container">
            <div style="width: 100%; height: 180px" ref="pm25Chart2Ref"></div>
          </div>
        </div>

        <!-- 雾霾图表 -->
        <div class="chart-section">
          <div class="chart-header">
            <h3 class="chart-title">雾霾</h3>
            <div class="chart-legend">
              <span class="legend-item">
                <span class="legend-dot" style="background-color: #00d4aa;"></span>
                监测点1
              </span>
              <span class="legend-item">
                <span class="legend-dot" style="background-color: #ff6b6b;"></span>
                监测点2
              </span>
            </div>
          </div>
          <div class="chart-container">
            <div style="width: 100%; height: 180px" ref="hazeChartRef"></div>
          </div>
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Close } from "@element-plus/icons-vue";
import * as echarts from "echarts";
import useChart from "@/hooks/useCharts.js";

const emits = defineEmits(["close"]);

// Tab状态
const activeTab = ref('realtime');

// 图表引用
const pm25Chart1Ref = ref(null);
const pm25Chart2Ref = ref(null);
const hazeChartRef = ref(null);

// 图表实例
let pm25Chart1 = useChart(pm25Chart1Ref).chartInstance;
let pm25Chart2 = useChart(pm25Chart2Ref).chartInstance;
let hazeChart = useChart(hazeChartRef).chartInstance;

// 时间轴数据
const timeData = ['15:15', '15:20', '15:25', '15:30', '15:35', '15:40'];

// PM2.5数据
const pm25Data1 = {
  monitor1: [120, 180, 200, 150, 100, 80],
  monitor2: [100, 160, 180, 130, 90, 70]
};

const pm25Data2 = {
  monitor1: [140, 200, 220, 170, 120, 100],
  monitor2: [120, 180, 200, 150, 110, 90]
};

// 雾霾数据
const hazeData = {
  monitor1: [30, 45, 50, 40, 35, 25],
  monitor2: [25, 40, 45, 35, 30, 20]
};

// 通用图表配置
const getChartOption = (data, yAxisName, maxValue = 250) => {
  return {
    backgroundColor: 'transparent',
    grid: {
      left: '10%',
      right: '5%',
      top: '15%',
      bottom: '15%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00d4aa',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    xAxis: {
      type: 'category',
      data: timeData,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      axisLabel: {
        color: '#dedede',
        fontSize: 11
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: yAxisName,
      nameTextStyle: {
        color: '#dedede',
        fontSize: 11
      },
      max: maxValue,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#dedede',
        fontSize: 11
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '监测点1',
        type: 'line',
        data: data.monitor1,
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#00d4aa',
          width: 2
        },
        itemStyle: {
          color: '#00d4aa'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0, 212, 170, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(0, 212, 170, 0.05)'
              }
            ]
          }
        }
      },
      {
        name: '监测点2',
        type: 'line',
        data: data.monitor2,
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#ff6b6b',
          width: 2
        },
        itemStyle: {
          color: '#ff6b6b'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255, 107, 107, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(255, 107, 107, 0.05)'
              }
            ]
          }
        }
      }
    ]
  };
};

// 初始化图表
const initCharts = () => {
  // PM2.5 图表1
  const pm25Option1 = getChartOption(pm25Data1, '', 250);
  pm25Chart1.value.setOption(pm25Option1);

  // PM2.5 图表2
  const pm25Option2 = getChartOption(pm25Data2, '', 250);
  pm25Chart2.value.setOption(pm25Option2);

  // 雾霾图表
  const hazeOption = getChartOption(hazeData, '', 60);
  hazeChart.value.setOption(hazeOption);
};

const onClose = () => {
  emits("close");
};

onMounted(() => {
  initCharts();
});
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
}

.ecological-monitoring {
  background-color: transparent;
  color: #333;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 12px;

  .tab-container {
    margin-bottom: 16px;
    
    .tab-buttons {
      display: flex;
      gap: 2px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      padding: 2px;
      
      .tab-btn {
        flex: 1;
        background: transparent;
        border: none;
        color: #dedede;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.2s;
        
        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
        
        &.active {
          background: #00d4aa;
          color: #fff;
        }
      }
    }
  }

  .monitoring-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    overflow-y: auto;

    .chart-section {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
      padding: 16px;
      
      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        
        .chart-title {
          font-size: 16px;
          color: #fff;
          font-weight: 500;
          margin: 0;
        }
        
        .chart-legend {
          display: flex;
          gap: 16px;
          
          .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: #dedede;
            
            .legend-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              display: inline-block;
            }
          }
        }
      }
      
      .chart-container {
        width: 100%;
        height: 180px;
        
        > div {
          width: 100% !important;
          height: 100% !important;
        }
      }
    }
  }
}
</style>